import { definePageConfig, useNavigate, Outlet } from 'ice';
import { Dropdown, Icon, Menu, Nav, Shell } from '@alifd/next';
import styles from './layout.module.css';
import { getUser } from '@/utils/user';
import { useLocation } from '@ice/runtime/router';
import { userType } from '@/services/user';

export const pageConfig = definePageConfig(() => {
  return {
    auth: ['admin'],
  };
});
// 菜单
const navItem = [
  {
    icon: 'account',
    url: '/home',
    text: '我的图片',
  },
  {
    icon: 'calendar',
    url: '/home/userManagement',
    text: '用户管理',
    status: 'root',
  },
  {
    icon: 'atm',
    url: '/home/imagesManagement',
    text: '图片管理',
    status: 'root',
  }];
export default function IndexPage() {
  const user = getUser() as userType;
  const location = useLocation();
  const navigate = useNavigate();
  // 跳转菜单
  const goToUrl = (url: string) => {
    if (location.pathname !== url) {
      navigate(url, { state: { from: location.pathname } });
    }
  };

  // 退出登录
  const logOut = () => {
    navigate('/register');
    localStorage.removeItem('token');
    localStorage.removeItem('user');
  };
  return (
    <Shell fixedHeader className="h-full">
      <Shell.Branding>
        图片管理器 (✿◕‿◕✿)
      </Shell.Branding>
      <Shell.Action>
        <div className="mr">身份:{user?.status?.id ? '用户' : '管理员'}</div>
        <Dropdown
          trigger={<div className="cursor-pointer">昵称：{user?.name}</div>}
          triggerType={['hover']}
          offset={[5, 20]}
        >
          <Menu>
            <Menu.Item onClick={() => navigate('/home/userInfo')}>
              <Icon type="account" size="xs" className="mr-5px" /> 个人信息
            </Menu.Item>
            <Menu.Item onClick={logOut}><Icon type="exit" size="xs" className="mr-5px" /> 退出登录</Menu.Item>
          </Menu>
        </Dropdown>
      </Shell.Action>
      <Shell.Navigation>
        <div className={styles.nav}>
          <Nav embeddable aria-label="global navigation" iconOnlyWidth="100%" selectedKeys={location.pathname}>
            {navItem.map(item => {
              return (item.status?.includes(user?.status.name) || item.status == undefined) && <Nav.Item
                icon={item.icon}
                key={item.url}
                onClick={() => goToUrl(item.url)}
              >
                {item.text}
              </Nav.Item>;
            })}
          </Nav>
        </div>
      </Shell.Navigation>
      <Shell.Content className={styles.content}>
        <Outlet />
      </Shell.Content>
    </Shell>
  );
}

